[译] CSS Animations 的提示与技巧（MDN）

date
Mar 23, 2019
slug
[译]-CSS-Animations-的提示与技巧（MDN）
status
Published
tags
CSS
summary
CSS Animations 的出现让你在文档和应用上创建不可思议的动画效果成为了可能。但是，有一些你想实现的东西可能并非如此浅显，或者说你不能轻易的想出一种聪明的方式来完成它们。这篇文章包含了一系列的提示与技巧来使得你的工作更加容易，其中包括了如何让一个已经停止的动画重新运行起来。
type
Post
原文地址（MDN）
CSS Animations 的出现让你在文档和应用上创建不可思议的动画效果成为了可能。但是，有一些你想实现的东西可能并非如此浅显，或者说你不能轻易的想出一种聪明的方式来完成它们。这篇文章包含了一系列的提示与技巧来使得你的工作更加容易，其中包括了如何让一个已经停止的动画重新运行起来。

让动画再次运行起来

CSS Animations 的规范没有提供让动画再次运行起来的方法。并不存在适用于元素的魔法方法requestAnimation()，甚至即使你把元素的animation-play-state设置为"running"也无济于事。你得用一种聪明的技巧来使得已经停止的动画再次回放。
我们将介绍一种我们认为足够稳定可靠的方法给你。

HTML 内容

首先，让我们创建一个用于执行动画的<div>和一个用于播放（或者说回放）动画的按钮。
<div class="box">
</div>

<div class="runButton">Click me to run the animation</div>

CSS 内容

现在让我们用CSS定义动画本身。一些并不重要的CSS（例如播放按钮自身的样式）出于简洁的考虑并不会在这里出现。
@keyframes colorchange {
  0% { background: yellow }
  100% { background: blue }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}
这里有两个 class。"box" class 是盒子外观的基础描述，并不包含任何动画信息。动画细节都被包含在"changing" class 里，它描述了：一个叫colorchange的@keyframes将会被运用在一个2秒钟的作用于盒子的动画过程之中。

JavaScript 内容

下一步我们将看看 JavaScript 所做的工作。这项技术的核心位于play()函数之中，这个函数将在用户点击“Run”按钮时被回调。
function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function(time) {
    window.requestAnimationFrame(function(time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
看起来真的很奇怪，不是吗？这是因为再次播放动画的唯一方法就是删除动画效果，让文档重新计算样式来使得它明白你已经进行了删除，然后再把动画效果添加回元素中。为了让这一切发生，我们必须要有创造性。
这是当play()方法被调用时发生了什么：
  1. 盒子的class被重置为了"box"。这个动作把其他当前运用在盒子上的 class 都给删除了，包括处理动画的"changing"class。换而言之，我们正把盒子上的动画效果给移除掉。但是，在样式重新计算完成之前，或反应改变的刷新发生之前，class 列表的变更都不会生效。
  1. 为了确保样式已经被重新计算，我们使用window.requestAnimationFrame()来指定一个回调。这样我们的回调就会在文档下一次重绘之前执行。问题在于，因为是发生重绘前的，所以样式的重计算还没有真的发生！所以……
  1. 我们的回调聪明地第二次调用了requestAnimationFrame()！这一次，回调运行于第二次下一次重绘之前，这时第一次重绘已经完成，所以可以确保样式的重计算已经发生。这个回调把changing class 添加回了盒子之上，使得重绘后动画将再次开始。
当然，我们还需要给我们的"Run"按钮添加一个事件处理器：
document.querySelector(".runButton").addEventListener("click", play, false);

停止动画

仅仅删除应用于元素的animation-name就会让元素跳转到它的下一个状态。如果你想在动画完成时再让它停止，那么你可能需要尝试另一种不同的方法。主要技巧如下：
  1. 让你的动画越独立越好。意思是你不应该依赖于animation-direction: alternate。取而代之，你应该显式地写一个 keyframe 动画来模拟这个过程。
  1. 在animationiteration事件发生时，用 JavaScript 清理正在被使用的动画。
下面的 demo 展示了如何实现上述的 JavaScript 技术：
.slidein {
  animation-duration: 5s;
  animation-name: slidein;
  animation-iteration-count: infinite;
}

.stopped {
  animation-name: none;
}

@keyframes slidein {
  0% {
    margin-left: 0%;
  }
  50% {
    margin-left: 50%;
  }
  100% {
    margin-left: 0%;
  }
}
<h1 id="watchme">Click me to stop</h1>
let watchme = document.getElementById('watchme')

watchme.className = 'slidein'
const listener = (e) => {
  watchme.className = 'slidein stopped'
}
watchme.addEventListener('click', () =>
  watchme.addEventListener('animationiteration', listener, false)
)
Demo地址
更新于Mar 23, 2019, 6:23:51 PM。部分live demo不能链接过来，请前往原文进行查看。

© ryougifujino 2021 - 2025